<template>
   <div class="my-tag">
              <input 
                class="input"
                v-if="isEdit"
                v-focus
                type="text"
                placeholder="输入标签"
                @blur="isEdit=false"
                :value="value"
                @keyup.enter="handleEnter"
              />
              <div class="text" v-else @dblclick="handleClick">
                {{ value }}
              </div>
            </div>
</template>

<script>
export default {
  props:{
    value:String,
    
  },
    data(){
        return{
            isEdit:false,
        }
    },
    methods:{
        handleClick(){
            this.isEdit = true
        },
        handleEnter(e){
          if(!e.target.value.trim()){
            return alert('请输入标签名称!')
          }
          this.$emit('input',e.target.value)
          this.isEdit=false
        }
    }
}
</script>

<style lang="less" scoped>
  .my-tag {
    cursor: pointer;
    .input {
      appearance: none;
      outline: none;
      border: 1px solid #ccc;
      width: 100px;
      height: 40px;
      box-sizing: border-box;
      padding: 10px;
      color: #666;
      &::placeholder {
        color: #666;
      }
    }
  }
</style>